// 雷达图对象组件

var H5ComponentRadar = function(name, cfg) {
	var component = new H5ComponentBase(name, cfg);

	//绘制多边形网格
	var w = cfg.width;
	var h = cfg.height;

	//加入一个画布（网格背景）
	var cns = document.createElement('canvas');
	var ctx = cns.getContext('2d');
	cns.width = ctx.widht = w;
	cns.height = ctx.height = h;
	component.append(cns);

	var r = w/2;
	var step = cfg.data.length;

	//(分面绘制，分为5份)
	var isBlue = false;
	for(var s = 5; s > 0; s--) {
		ctx.beginPath();
		ctx.strokeStyle = '#f1f9ff';
		for(var i = 1; i <= step; i++) {
			var rad = ((2 * Math.PI) / step) * i;
			var x = r + r * Math.sin(rad) * (s/5);
			var y = r + r * Math.cos(rad) * (s/5);

			ctx.lineTo(x, y);
		}	
		ctx.fillStyle = (isBlue = !isBlue) ? '#99c0ff' : '#f1f9ff';
		ctx.closePath();
		ctx.fill();
		ctx.stroke();
	}

	//绘制伞骨
	for(var i = 0; i < step; i++) {
		var rad = ((2 * Math.PI) / step) * i;
		var x = r + r * Math.sin(rad);
		var y = r + r * Math.cos(rad);

		ctx.moveTo(r ,r);
		ctx.lineTo(x, y);
	}
	ctx.strokeStyle = '#fff';
	ctx.stroke();

	//加入项目名称
	for(var i = 0; i < step; i++) {
		var rad = ((2 * Math.PI) / step) * i;
		var x = r + r * Math.sin(rad);
		var y = r + r * Math.cos(rad);

		var text = $('<div class="text"></div>');
		text.text(cfg.data[i][0]);
		if(x > w/2) {
			text.css('left', x/2 + 5 + 'px');
		}else{
			text.css('right', (w - x)/2 + 5 + 'px');
		}
		if(y >= h/2) {
			text.css('top', y/2 + 5 + 'px');
		}else{
			text.css('bottom', (h - y)/2 + 5 + 'px');

		}
		text.css('opacity', 0);
		text.css('transition-delay', .1 * i + 's');
		component.append(text);
	}

	//绘制数据层，加入一个画布
	var cns = document.createElement('canvas');
	var ctx = cns.getContext('2d');
	cns.width = ctx.widht = w;
	cns.height = ctx.height = h;
	component.append(cns);
	
	/**
	 * 绘制雷达数据
	 * @param  {[float] per 0到1之间的数据，会根据这个值绘制最终数据对应到中间状态}
	 * @return {[]} 
	 */
	var draw = function(per) {
		if(per >= 1) {
			component.find('.text').css('opacity' , 1);
		}else{
			component.find('.text').css('opacity' , 0);
		}

		//清空画布
		ctx.clearRect(0, 0, w, h);

		//输出数据点
		for(var i = 0; i < step; i++) {
			var rad = ((2 * Math.PI) / step) * i;
			var rate = cfg.data[i][1];
			var x = r + r * Math.sin(rad) * rate * per;
			var y = r + r * Math.cos(rad) * rate * per;

			ctx.beginPath();
			ctx.arc(x, y, 3, 0, 2*Math.PI);
			ctx.fillStyle = '#f00';
			ctx.fill();
		}

		//输出数据折线
		ctx.beginPath();
		for(var i = 0; i < step; i++) {
			var rad = ((2 * Math.PI) / step) * i;
			var rate = cfg.data[i][1];
			var x = r + r * Math.sin(rad) * rate * per;
			var y = r + r * Math.cos(rad) * rate * per;


			ctx.lineTo(x, y);
		}
		ctx.strokeStyle = '#f00';
		ctx.closePath();
		ctx.stroke();

	}
	
	component.on('onLoad', function() {
		//折线图生长动画
		var s = 0;
		for(var i = 0; i <= 100; i++){
			setTimeout(function() {
				s += 0.01;
				draw(s);
			}, 10*i + 1000);
		}
	});

	component.on('onLeave', function() {
		//折线图退场动画
		var s = 1;
		for(var i = 0; i <= 100; i++){
			setTimeout(function() {
				s -= 0.01;
				draw(s);
			}, 10*i);
		}
	});


	return component;
}